<!-- 健康仪表盘系统前端页面 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>老年人多模态健康仪表盘</title>
    
    <!-- 引入Bootstrap 5 CDN -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- 引入Plotly.js CDN -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    
    <!-- 引入ECharts.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    
    <style>
        body {
            font-size: 18px; /* 字体放大 */
            background-color: #f8f9fa; /* 浅灰色背景 */
            color: #333;
        }
        
        .btn-primary {
            background-color: #165DFF; /* 柔和的蓝色按钮 */
            border-color: #165DFF;
            font-size: 18px;
            padding: 10px 20px;
        }
        
        .btn-primary:hover {
            background-color: #0E47D9;
            border-color: #0E47D9;
        }
        
        .dashboard-container {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .dashboard-header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background-color: #fff;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .dashboard-header h1 {
            font-size: 32px;
            font-weight: 600;
            color: #165DFF;
        }
        
        .file-upload-area {
            background-color: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 30px;
        }
        
        .chart-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        
        .upload-input {
            margin-bottom: 15px;
            font-size: 16px;
        }
        
        .alert-success {
            margin-top: 20px;
            font-size: 18px;
            display: none;
        }
        
        /* 模态框样式 */
        .modal-header {
            background-color: #165DFF;
            color: white;
            font-size: 20px;
        }
        
        .modal-body {
            font-size: 16px;
        }
        
        /* 图表容器高度 */
        #glucose-chart {
            height: 400px;
        }
        
        #activity-heatmap {
            height: 300px;
        }
        
        #health-radar {
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="dashboard-container">
        <!-- 顶部标题 -->
        <div class="dashboard-header">
            <h1>老年人多模态健康仪表盘</h1>
        </div>
        
        <div class="row">
            <!-- 左侧上传区域 -->
            <div class="col-lg-3">
                <div class="file-upload-area">
                    <h3 class="mb-4">数据上传</h3>

                    <!-- 网络选择（新增） -->
                    <div class="mb-3">
                        <div class="d-flex align-items-center justify-content-between">
                            <label class="form-label mb-0">网络选择（从后端data目录）</label>
                            <button id="fetch-list-btn" class="btn btn-sm btn-primary">选择文件</button>
                        </div>
                        <small id="net-selected-count" class="text-muted d-block mt-2">已选择0个文件</small>
                        <button id="clear-selection-btn" class="btn btn-sm btn-outline-secondary mt-2">清空选择</button>
                    </div>
                    <hr/>
                    
                    <!-- 本地手动上传（保留） -->
                    <div class="mb-3">
                        <label for="activity-file" class="form-label">活动数据 (activity.csv)</label>
                        <input type="file" class="form-control upload-input" id="activity-file" accept=".csv">
                    </div>
                    
                    <div class="mb-3">
                        <label for="glucose-file" class="form-label">血糖数据 (glucose.csv)</label>
                        <input type="file" class="form-control upload-input" id="glucose-file" accept=".csv">
                    </div>
                    
                    <div class="mb-3">
                        <label for="clhls-file" class="form-label">健康问卷数据 (clhls.csv)</label>
                        <input type="file" class="form-control upload-input" id="clhls-file" accept=".csv">
                    </div>
                    
                    <button id="upload-btn" class="btn btn-primary w-100">上传</button>
                    
                    <div id="upload-success" class="alert alert-success">
                        数据上传成功！
                    </div>
                </div>
            </div>
            
            <!-- 中间血糖图表 -->
            <div class="col-lg-5">
                <div class="chart-container">
                    <h3 class="mb-4">血糖趋势图</h3>
                    <div id="glucose-chart"></div>
                </div>
            </div>
            
            <!-- 右侧图表区域 -->
            <div class="col-lg-4">
                <!-- 行为热力图 -->
                <div class="chart-container">
                    <h3 class="mb-4">行为热力图</h3>
                    <div id="activity-heatmap"></div>
                </div>
                
                <!-- 健康雷达图 -->
                <div class="chart-container">
                    <h3 class="mb-4">健康评分雷达图</h3>
                    <div id="health-radar"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 预警弹窗 -->
    <div class="modal fade" id="alert-modal" tabindex="-1" aria-labelledby="alert-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="alert-modal-label">⚠️ 警告</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>血糖异常预警！</p>
                    <p>请及时关注健康状况。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 文件选择器模态框（新增） -->
    <div class="modal fade" id="pickerModal" tabindex="-1" aria-labelledby="pickerModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="pickerModalLabel">请选择最多3个CSV</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <div id="picker-list" class="list-group"></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
            <button type="button" id="picker-confirm-btn" class="btn btn-primary">确定</button>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 引入Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- 引入main.js处理交互逻辑 -->
    <script src="js/main.js"></script>
</body>
</html>